<template>
<div class="login">
		<n-form ref="formRef" label-placement="left" :model="model" :rules="rules" class="login_form">
			<n-form-item label="账号" path="user.adminname">
				<n-input v-model:value="model.user.adminname" placeholder="请输入账号" />
			</n-form-item>
			<n-form-item label="密码" path="user.password">
				<n-input v-model:value="model.user.password" placeholder="请输入密码" />
			</n-form-item>
			<n-form-item>
				<n-button block type="info" @click="handlerLogin" :loading="loading">登录</n-button>
			</n-form-item>
		</n-form>
	</div>
</template>
<script>
import {login} from "../../api/user.js"
export default {
	name: "Login",
	data() {
		return {
			loading:false,
			model :{
				user:{
					adminname:'admin',
					password:'123456'
				}
			},
			rules: {
				user: {
					adminname: {
						required:true,
						message:"账号密码不能为空,要在5~15位之间",
						validator(rules,value) {
							const reg = /^\w{2,15}$/
							return reg.test(value)
						},
						trigger: ["input"]
					},
					password: {
						required: true,
						validator(rules, value) {
							const reg = /^\w{2,15}$/
							return reg.test(value)
						},
						message: "密码不能为空,或者密码的长度在5~15位之间",
						trigger: ["input"]
					},
				}
			}
		}
	},
	methods :{
		async handlerLogin() {
			try {
				const result = await this.$refs.formRef.validate()
				//再点击登录的时候，让按钮处于加载的状态
				this.loading = true;
				if (!result) {
					login(this.model.user.adminname,this.model.user.password)
					.then(res=>{
						//console.log(res);
						this.$store.commit("user/SET_USERINFO",res.data)
						this.$router.push({path:"/dashboard/console"})
						this.loading = false;
					})
				}
			} catch (error) {
				// message.error("数据校验失败")
				this.$message.error("数据校验失败"); 
			}
		}
	}
}

</script>

<style scoped lang='scss'>
.login{
	height: 100%;
	background: linear-gradient(#FFC0CB, #FFA07A);
	display: flex;
	justify-content: center;
	align-items: center;
	.login_form{
		padding: 50px;
		border-radius: 20px;
		width: 500px;
		height: 150px;
		background-color: #fff;
	}
}
</style>

